<template>
  <div class="code_table_field" v-loading="loading" element-loading-text="加载中...">
    <el-form>
      <el-form-item label="登记功能" class="form-item">
        <el-radio-group v-model="form.register">
          <el-radio :value="true">
            <span class="bg_text">启用</span>
          </el-radio>
          <el-radio :value="false">
            <span class="bg_text">关闭</span>
          </el-radio>
        </el-radio-group>
        <div class="tips">如果产品无需登记信息，可关闭登记功能</div>
      </el-form-item>
      <el-form-item label="登记内容">
        <div class="text">可根据自身需求，灵活配置产品登记质保信息的内容</div>
      </el-form-item>
    </el-form>
    <div class="btns flex-justify-end mt10">
      <HPlainButton @click="saveSet">保存</HPlainButton>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { getCodeRegSet, saveCodeRegSet } from '../../../../../../../api/basic'
  import routeComponentName from '@/config/route-component-name'

  defineOptions({
    name: routeComponentName.setting.snCodeRegisterSet,
  })

  const loading = ref(false)
  const form = reactive({
    id: null,
    register: true,
  })

  // 获取序列号登记设置
  const getSet = async () => {
    loading.value = true
    await getCodeRegSet().then((res) => {
      form.id = res.data.data.row.id
      form.register = res.data.data.row.register
    })
    loading.value = false
  }

  // 保存序列号设置
  const saveSet = () => {
    ElMessageBox({
      type: 'warning',
      title: '提示',
      message: `确认保存修改的设置?`,
      showCancelButton: true,
      closeOnClickModal: false,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.confirmButtonText = '加载中...'
          setTimeout(() => {
            done()
            setTimeout(() => {
              instance.confirmButtonLoading = false
            }, 0)
          }, 1000)
        } else {
          done()
        }
      },
    }).then(async () => {
      await saveCodeRegSet(form).then((res) => {
        if (res.data.success) {
          ElMessage({
            message: res.data.message,
            type: 'success',
            duration: 5000,
            showClose: true,
            plain: true,
          })
        } else {
          ElMessage({
            message: res.data.message,
            type: 'warning',
            duration: 5000,
            showClose: true,
            plain: true,
          })
        }
      })
      getSet()
    })
  }

  // 返回方法
  defineExpose({ getSet })
</script>

<style scoped lang="scss">
  .code_table_field {
    box-sizing: border-box;
    padding: 0 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    :deep(.el-form) {
      .el-form-item {
        .el-form-item__label {
          height: 28px;
          line-height: 28px;
        }

        .el-form-item__content {
          flex-direction: column;
          align-items: flex-start;

          .el-radio-group {
            column-gap: 12px;

            .el-radio {
              margin: 0;
              height: 28px;
              column-gap: 5px;

              .el-radio__label {
                padding: 0;
                height: 28px;
                line-height: 28px;
              }
            }
          }

          .tips {
            height: 16px;
            line-height: 16px;
            color: #606266;
          }

          .text {
            height: 28px;
            line-height: 28px;
            color: #606266;
          }
        }
      }
    }
  }
</style>
